<template>
  <div class="sdy-home-banner">
    <van-swipe 
      class="swiper-container" 
      :autoplay="3000" 
      :duration="1000"
      indicator-color="red">
      <van-swipe-item
        v-for="item in bannerList"
        :key="item.bannerid">
        <van-image :src="item.img"></van-image>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup lang="ts">
  // 导入对应的 api 请求功能函数
  import { bannerListApi } from '@/api/banner'
  // 导入类型限制
  import type { MyBannerItem } from '@/config/interface'
  import { ref, onMounted } from 'vue'

  // 提前准备一个数组，请求回来以后进行替换
  // 用该数组渲染页面(因为涉及到替换，所以要使用 ref 来 定义)
  const bannerList = ref<MyBannerItem[]>([])

  // 挂载完毕的钩子
  onMounted(async () => {
    // 获取轮播图列表
    const res = await bannerListApi()
    // console.log(res)
    bannerList.value = res.data
  })
</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
.sdy-home-banner{
  height: 180px;
  // border-bottom: 1px solid #333;
  position: relative;
  box-sizing: border-box;
  padding: 15px;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: -50px;
    width: 100%;
    height: 100%;
    background-color: $globalColor;
    border-radius: 0 0 200px 200px / 0 0 40px 40px;
    z-index: -1;
  }
  
  > .swiper-container {
    width: 100%;
    height: 100%;
    background-color: orange;
    border-radius: 10px;
    overflow: hidden;
  }
}
</style>